<template>
  <div>
    <div class="chat-main">
      <div class="chat-head">
        <div>
          <span style="margin: 0 10px;">{{username}}</span>
        </div>
      </div>
      <div class="chat-body">
        <div
          v-for="(message, index) in messages"
          :key="index"
          :class="message.isSelf ? 'sender' : 'receiver'"
        >
          <div>
            <img :src="message.imageUrl" />
          </div>
          <div v-if="message.isSelf === true">
            <div class="left-triangle"></div>
            <span>{{ message.content }}</span>
          </div>
          <div v-if="message.isSelf === false">
            <div class="right-triangle"></div>
            <span>{{ message.content }}</span>
          </div>
        </div>
      </div>
      <div class="chat-option"></div>
      <textarea class="textbox" v-model="content"></textarea>
      <div class="chat-foot">
        <el-button type="primary" @click="sendMessage">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    username: {
      type: String,
      default: ""
    },
    messages: {
      type: Array,
      default() {
        return [];
      }
    },
    orderId: {
      default: 0
    }
  },
  data() {
    return {
      content: ""
    };
  },
  methods: {
    sendMessage() {
      if (this.content && this.content !== "") {
        this.$https
          .postXform("/doctorConsult/replayMessage", {
            message: this.content,
            type: 1,
            doctorOrderId: this.orderId
          })
          .then(res => {
			this.content = "";
			this.$emit("getMessages");
          });
      }
    }
  }
};
</script>

<style lang="less">
.sender,
.receiver {
  clear: both;
}

.sender div:nth-of-type(1) {
  float: left;
}

.sender div:nth-of-type(2) {
  float: left;
  background-color: aquamarine;
  margin: 5px 20px 10px 15px;
  padding: 10px 10px 10px 0px;
  border-radius: 7px;
  max-width: 40%;
}

.receiver div:first-child img,
.sender div:first-child img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

.receiver div:nth-child(1) {
  float: right;
}

.receiver div:nth-of-type(2) {
  float: right;
  background-color: gold;
  margin: 5px 10px 10px 20px;
  padding: 10px 0px 10px 10px;
  border-radius: 7px;
  max-width: 40%;
}

.left-triangle {
  height: 0px;
  width: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent aquamarine transparent transparent;
  position: relative;
  left: -16px;
  top: 3px;
}

.right-triangle {
  height: 0px;
  width: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent gold;
  position: relative;
  right: -16px;
  top: 3px;
}

.chat-main {
  height: 500px;
  width: auto;
  border: 1px solid #ccc;
  overflow: hidden;
  margin: 0 auto;
}

.chat-head {
  height: 25px;
  width: auto;
  border-bottom: 1px solid #ccc;
  background-color: #dfdfdf;
  display: flex;
  position: relative;
  align-items: center;
}

.chat-body {
  height: 300px;
  width: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 10px;
}

.chat-body::-webkit-scrollbar {
  /*滚动条整体样式*/
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 5px;
  height: 5px;
  scrollbar-arrow-color: #ffffff;
}

.chat-body::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.3);
  scrollbar-arrow-color: #ffffff;
}

.chat-body::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0);
}

.chat-option {
  height: 30px;
  width: auto;
  background-color: #dfdfdf;
}

.chat-foot {
  height: 45px;
  width: auto;
  background-color: #dfdfdf;
  text-align: right;
  padding: 2px 5px;
}

.textbox {
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  font-size: 16px;
  outline: none;
  vertical-align: middle;
  padding: 5px;
}
</style>
